<template>
  <el-table
    @row-click="cellClicks"
    :data="tableData"
    v-if="sortList"
    style="width: 100%"
    header-row-class-name="header_stock"
    ref="chatContent"
    :max-height="height"
    class="stock_list_table"
    :height="height"
    @sort-change="sortFor"
  >
    <el-table-column
      fixed
      :label="$t('quotation.left_list.56hzdc682d00')"
      min-width="120"
      class-name="stock_list_left"
      prop="name"
    >
      <template slot-scope="scope">
        <h2 class="f-cb stock_list_h2">{{ scope.row.name }}</h2>
        <p class="stock_list_p">
            <img
              class="type_icon"
              :src="
                scope.row.market == 'HKEX'
                  ? HKicon
                  : scope.row.market == 'US'
                  ? USicon
                  : scope.row.market == 'SSE'
                  ? SHicon
                  : SZicon
              "
              alt=""/>
          
          {{ scope.row.stockCode || scope.row.symbol }}
        </p>
      </template>
    </el-table-column>
    <!-- 最新价 -->
    <el-table-column
      prop="latestPrice"
      :label="$t('m.latestPrice')"
      min-width="100"
      sortable="custom"
      class-name="stock_list_center"
    >
      <template slot-scope="scope">
        <div
          :class="
            scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
          "
        >
          {{ scope.row.latestPrice | toFixed(scope.row.precision) }}
        </div>
      </template>
    </el-table-column>
    <!-- 涨跌额 -->
    <el-table-column
      :label="$t('stock.sh_List.57klx1zuyec0')"
      prop="chg"
      sortable="custom"
      min-width="100"
      class-name="stock_list_right"
    >
      <template slot-scope="scope">
        <h2
          :class="
            scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
          "
        >
          {{ scope.row.gain > 0 ? "+" : ""
          }}{{ Number(scope.row.chg).toFixed(2) }}
        </h2>
      </template>
    </el-table-column>
    <!-- 涨跌幅 -->
    <el-table-column
      :label="$t('stock.sh_List.57klx1zuzvs0')"
      prop="gain"
      sortable="custom"
      min-width="100"
      class-name="stock_list_right"
    >
      <template slot-scope="scope">
        <h2
          :class="
            scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
          "
        >
          {{ scope.row.gain > 0 ? "+" : ""
          }}{{ Number(scope.row.gain * 100).toFixed(2) }}%
        </h2>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["sortList", "stockHeight","sumbit"],
  data() {
    return {
      height: null,
      scroll: 0,
      windowHeight: 0,
      scrollHeight: 0,
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      SHicon: require("@/assets/img/icon_sh.png"),
      SZicon: require("@/assets/img/icon_sz(1).png"),
      tableData: [], // 列表数据
      currentSumbit: {}
    };
  },
  mounted() {
    var _this = this;
    this.getHeight();
    $(window).resize(function() {
      _this.getHeight();
    });
    // 通过$refs获取dom元素
    var box = this.$refs.chatContent.bodyWrapper;
    this.currentSumbit = this.sortList.submit;
    console.log(this.sortList.submit,this.$t('stock.sh_List.57klx1zv0e80'))
    this.getdata();
  },
  methods: {
    getHeight() {
      if ($(window).width() > 1450) {
        this.height = this.stockHeight;
      } else {
        this.height = 285;
      }
    },
    cellClicks(row) {
      var StockData = {
        securityType: row.securityType,
        symbol: row.symbol,
        market: row.market
      };
      if(!this.hkActive && !this.shActive && !this.usActive && !this.zixuanActive) {
        // 当任意股票市场的右侧弹框打开存储上上一次的值用于跳到行情页面时回复到原值
        this.$store.dispatch("SetObserveStrock",this.StockDatas)
      }
      // 点击列表中的值打开右侧弹框
      this.$store.dispatch("SetStockData", StockData);
      this.$emit("ListClick", true);
    },
    sortFor(column) {
      // 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
      if (column.order == "ascending") {
        this.currentSumbit.order = "ASC";
      } else if (column.order == "descending") {
        this.currentSumbit.order = "DESC";
      } else {
        this.currentSumbit.order = "";
      }
      this.tableData = [];
      this.getdata();
    },
    // 获取接口请求
    async getdata() {
      if (Object.keys(this.currentSumbit).length == 0) return;
      const res = await this.$axios.post(this.sortList.url, {
        ...this.currentSumbit,
      });
      if (res.code != 1) return this.$message.error(res.msg);
      this.tableData = [...res.data.list];
    },
  },
  computed: {
    StockDatas() {
      return this.$store.state.index.StockData;
    },
    hkActive() {
      return this.$store.state.index.hkActive;
    },
    shActive() {
      return this.$store.state.index.shActive;
    },
    usActive() {
      return this.$store.state.index.usActive;
    },
    zixuanActive() {
      return this.$store.state.index.zixuanActive;
    },

  },
  watch: {
    stockHeight(val) {
      this.height = val;
    },
    sortList:{
      handler(val) {
        console.log(val,this.$t('stock.sh_List.57klx1zv0vk0'))
        if(Object.keys(val).length > 0) {
          this.getdata();
        }
      }
    },
    deep: true
  }
};
</script>
<style lang="less">
.stock_list_table {
  // border: 1px solid @LightBorderLine;
   .el-table__header {
    .header_stock {
      height: 40px;
    }
    th {
      border-bottom: 1px solid @LightBorderLine;
    }
    .cell {
      font-size: 12px;
      color: @Dark_gray !important;
      font-weight: normal;
    }
    .stock_list_right {
      .cell {
        text-align: left;
      }
    }
    .stock_list_center {
      .cell {
        text-align: left;
      }
    }
    .stock_list_left {
      background: @deepBg;
    }
  }
   .el-table__body {
    cursor: pointer;
    .stock_list_left {
      background: @deepBg;
      padding-bottom: 0;
      .stock_list_h2 {
        position: relative;
        font-size: 12px;
        color: @fff;
        line-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 4px;
        padding: 0;

        b {
          display: block;
          width: 100%;
          font-weight: normal;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 22px;
        }
      }
      .stock_list_p {
        font-size: 12px;
        color: @fff;
        margin-bottom: 4px;
        line-height: 16px;
        .type_icon {
          height: 13px;
          margin-right: 5px;
        }
        .warn_icon {
          width: 16px;
        }
      }
    }
    .cell {
      h2{
        background: none;
      }
    }
    .stock_list_center {
      .cell {
        color: @fff;
        font-size: 14px;
        text-align: left;
      }
    }
    .stock_list_right {
      .cell {
        text-align: left;
        h2 {
          font-size: 14px;
          color: @fff;
        }
      }
    }
    td {
      border-bottom: 1px solid @LightBorderLine;
    }
  }
  .el-table__fixed{
    bottom:8px !important;
  }
   .el-table__fixed::before {
    display: none;
  }

  .el-loading-mask {
    background: none;
  }
  
}
</style>